<template>
<!--  {{props.events}}-->
  <div class="content_box">
    <FullCalendar v-model:options="calendarOptions" />
    <TaskEditDrawer v-model="formData"></TaskEditDrawer>
  </div>
</template>

<script lang="ts" setup>
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import FullCalendar from "@fullcalendar/vue3";
import {onMounted, reactive, ref} from "vue";
import {TaskData, TaskMoreData} from "@/views/model/model";
import {post, Response} from "@/api/http";
import {getTaskPanelInfo} from "@/api/url";
import {convertEvent, covertTime2TimeZoneStr, obj2Map, timestampToDateTime} from "@/utils";
import TaskEditDrawer from "@/views/task/TaskEditDrawer.vue";
import UseSurfaceSettingStore from "@/store/modules/surfaceSetting";
import useUserStore from "@/store/modules/user";
import moment from "moment-timezone";
const useSurfaceSetting = UseSurfaceSettingStore()
const surfaceSetting = useSurfaceSetting.getSurfaceSetting();
const formData = reactive({
  show:false,
  taskPanel:true,
  key:Date.now(),
  edit:false,
  data:TaskData.getNewTaskData(parseInt(surfaceSetting.showTaskPanelState),1,null)
})
const userStore = useUserStore()
let showFinish = true;
let showNoTime = true;
const props = defineProps(["events", "finishEvents", "noTimeEvents","timeZone"]);
const handleEventClick = (calEvent:any)=>{
  console.log(calEvent.event.extendedProps)
  calEvent.jsEvent.preventDefault(); // don't let the browser navigate
  formData.data = calEvent.event.extendedProps
  console.log(formData.data)
  formData.show = true
  // if (calEvent.event.url) {
  //   window.open(calEvent.event.url);
  // }
}
const calendarOptions:any = reactive({
  plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
  height: 550,
  initialView: "dayGridMonth",
  eventTextColor: "white",
  customButtons: {
    showMentionTimeTask: {
      text: "任务提醒日期",
      click: function () {
        calendarOptions.events = calendarOptions.events.map((e:any)=>{
          e.date = covertTime2TimeZoneStr(e.mentionTime, userStore.timezone);
          return e
        })
      }
    },
    showExpireTimeTask: {
      text: "任务截止日期",
      click: function () {
        calendarOptions.events = calendarOptions.events.map((e:any)=>{
          e.date = covertTime2TimeZoneStr(e.deadLine, userStore.timezone);
          return e
        })
      }
    },
    showFinishTask: {
      text: "展示已结束",
      click: function () {
        if (showFinish) {
          showFinish = false;
          calendarOptions.events = [...props.events, ...props.finishEvents];
        } else {
          showFinish = true;
          calendarOptions.events = [...props.events];
        }
      },
    },
    showNoTimeTask: {
      text: "展示未指定日期",
      click: function () {
        if (showNoTime) {
          showNoTime = false;
          calendarOptions.events = [...props.events, ...props.noTimeEvents];
        } else {
          showNoTime = true;
          calendarOptions.events = [...props.events];
        }
      },
    },
  },
  headerToolbar: {
    left: "dayGridMonth,timeGridWeek,showMentionTimeTask,showExpireTimeTask,showFinishTask,showNoTimeTask",
    center: "title",
    right: "prevYear,prev,next,nextYear today",
  },
  handleWindowResize: true,//是否随窗口大小变化
  eventClick: handleEventClick,
  eventOrderStrict: true,
  eventColor: "green",
  timeZone: userStore.timezone,
  // 设置日程
  events: [
    { title: "event 1", start: "2023-08-25 14:22:00", color: "red", description: "description for Long Event" },
    { title: "event 1", date: "2023-08-25 14:00:00" },
    { title: "event 1", date: "2023-08-25 14:00:00" },
    { title: "event 1", date: "2023-08-25 14:00:00" },
    { title: "event 2", date: "2023-08-24 14:00:00" },
  ],
  editable: false,
  dayMaxEventRows: 5,
  locale: "zh", // 设置语言
});

onMounted(() => {
  calendarOptions.events = props.events;
});
</script>

<style lang="scss" scoped></style>
